$c-clas: rgb(127, 90, 240);

$c-font-clas: mix($c-font-clear, $c-clas, 30%);
$c-bg-clas: $c-clas;
$c-bg-clas-over: white;
$c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);

%archived {
  @extend %box-radius, %flex-between;

  background: $c-bg-zebra2;
  padding: 1em 2em;
  margin-bottom: 2em;
}

.subnav a {
  white-space: normal;
  max-width: 22vw;

  @include breakpoint($mq-medium) {
    max-width: 15vw;
  }

  &.active {
    color: $c-font-clas;
  }

  &::after {
    background: $c-clas;
  }

  &.student {
    em {
      @extend %roboto;

      display: none;
    }

    @include breakpoint($mq-subnav-side) {
      font-weight: bold;
      padding: 0.4rem 2vw 0.4rem 0.8rem;

      em {
        font-weight: normal;
        display: block;
      }
    }
  }
}

.slist tbody tr:nth-child(2n) {
  background: mix($c-bg-box, $c-bg-clas, 93%);
}

.clas-index {
  .box__top {
    background: $c-bg-clas;

    &,
    a {
      color: $c-bg-clas-over;
    }

    flex-flow: row nowrap;

    h1 {
      margin: 0;
    }
  }

  .new::before {
    font-size: 3em;
  }

  .classes {
    &__empty {
      margin-bottom: 8em;
    }

    .clas-widget {
      @extend %flex-center-nowrap, %break-word;

      border-bottom: $border;
      padding: 2em var(--box-padding);
      position: relative;

      @include transition;

      &::before {
        color: mix($c-clas, $c-bg-box, 80%);
        font-size: 5em;
        margin-right: 0.4em;

        @include transition;
        @include breakpoint($mq-not-xx-small) {
          display: none;
        }
      }

      &:hover {
        background: mix($c-clas, $c-bg-box, 10%);

        &::before {
          color: mix($c-clas, $c-bg-box, 100%);
        }
      }

      .overlay {
        @extend %link-overlay;
      }

      h3 {
        @include fluid-size('font-size', 23px, 35px);

        color: $c-clas;
      }

      p {
        margin: 0.5em 0 0 0;
      }

      &-archived {
        &::before,
        h3 {
          color: $c-font-dim;
        }
      }
    }
  }
}

.clas-show {
  @extend %box-neat-force;

  &__top {
    background: $c-bg-clas;

    &,
    a,
    .button,
    .title {
      color: $c-bg-clas-over;
    }
  }

  &__overview {
    @extend %box-padding;

    background: $c-bg-zebra;

    &__manage {
      @extend %flex-between;
    }
  }

  &__archived {
    @extend %archived;
  }
}

.dashboard {
  .flash {
    margin: 2em 2em 0 2em;

    &__content {
      padding: 2em var(--box-padding);
    }
  }

  .students,
  .teachers {
    th {
      font-weight: bold;
    }

    .button {
      font-size: 1.2em;
      color: $c-font-clas;
    }

    .user-link {
      @extend %flex-center;

      &:hover {
        color: $c-font-clas;
      }

      span {
        pointer-events: none;
      }

      .line {
        font-size: 2em;
      }

      em {
        @extend %roboto;

        display: block;
      }
    }
  }

  .students {
    .rating {
      span {
        &::before {
          margin: 0;
        }

        margin: 0 0.3em;
      }
    }
  }

  &-nav {
    @extend %flex-center-nowrap;

    justify-content: center;
    align-items: flex-end;

    @include breakpoint($mq-not-xx-small) {
      font-size: 0.9em;
    }

    a {
      @extend %box-radius-top;

      flex: 1 1 auto;
      text-align: center;
      padding: 1.2em 0 0.8em 0;

      &:first-child {
        @extend %box-radius-top-right;
      }

      &:last-child {
        @extend %box-radius-top-left;
      }

      &:hover {
        background: mix($c-bg-zebra, $c-clas, 20%);
      }

      &.active {
        background: $c-bg-box;
        color: $c-font-clas;
        font-weight: bold;

        .dashboard-teacher-overview &,
        .dashboard-teacher-progress & {
          background: $c-bg-zebra;
        }
      }
    }
  }

  &-student {
    .clas-show {
      &__top {
        @extend %box-padding-horiz;

        h1 {
          padding: 1.5em 0;
          margin: 0;
        }
      }

      &__desc {
        margin-top: -1.5em;
        padding-bottom: 3em;
      }
    }

    .teachers {
      margin-bottom: 2em;
    }

    .clas-wall {
      max-height: 50vh;
      overflow-y: auto;
    }
  }

  &-teacher {
    .clas-show__top h1 {
      padding: 1.5em var(--box-padding);
      margin: 0;
    }

    .clas-show__desc {
      margin-bottom: 2em;
    }

    .progress {
      @extend %box-padding;

      background: $c-bg-zebra;

      > div {
        @extend %flex-center;

        &:first-child {
          margin-bottom: 1.5em;
        }
      }

      label {
        width: 12ch;
        display: inline-block;
        color: $c-font-dim;
        text-transform: uppercase;
      }

      &-choices {
        @extend %flex-center, %box-neat-force;

        @if $theme-dark {
          box-shadow: none;
        }

        flex: 1 1 auto;
        background: $c-bg-box;
      }

      a {
        flex: 1 1 auto;
        text-align: center;
        font-weight: bold;
        padding: 0.7em;
        color: $c-clas;

        &:hover {
          background: mix($c-bg-box, $c-clas, 70%);
          color: $c-font-clear;
        }

        &.active {
          background: $c-clas;
          color: $c-good-over;
        }

        border-right: 1px solid $c-border;

        &:last-child {
          border: 0;
        }
      }
    }

    .students {
      &__empty {
        margin: 4em 0;
      }

      td:first-child {
        font-weight: bold;
      }
    }

    .coords i {
      margin: 0 0.4em;

      &::before {
        margin-right: 0.2em;
      }
    }

    &-students h2 {
      margin: 2em 0 1em 0;
    }
  }
}

.clas-edit {
  &__archive {
    text-align: right;
  }
}

.button-clas {
  background: $c-clas;
}

.clas-wall {
  margin: 4em 0;
  font-size: 1.1em;
  line-height: 1.6em;

  img {
    max-width: 100%;
    max-height: 40vh;
  }

  li {
    list-style: disc outside;
    margin: 0.2em 0 0 1.2em;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0.7em 0;
  }

  em {
    font-style: italic;
  }

  &__actions {
    @extend %flex-center;

    justify-content: center;
    margin-top: 4em;

    .button {
      margin: 0 1em;
    }
  }

  &__edit {
    li {
      list-style: disc outside;
      margin: 0.5em 0 0 1.5em;
    }
  }
}

.student-show {
  padding-bottom: 3em;

  &__top {
    padding: calc(5vh - 1rem) var(--box-padding);
    background: $c-bg-clas;
    margin-bottom: 3em;

    &,
    a,
    .button,
    .title {
      color: $c-bg-clas-over;
    }

    a:not(.button) {
      font-weight: bold;
      border-bottom: 1px dotted $c-bg-clas-over-dim;
    }

    h1 {
      @extend %flex-center;

      margin-bottom: 0.6em;

      &::before {
        font-size: 2.5em;
        margin-right: 0.4em;
        color: $c-bg-clas-over-dim;
      }

      strong {
        display: block;
      }

      em {
        @extend %roboto;

        color: $c-bg-clas-over-dim;
      }
    }

    &__meta {
      @extend %flex-between;

      justify-items: center;

      p {
        margin: 0;
      }
    }
  }

  &__notes {
    margin-bottom: 2em;
  }

  &__managed {
    @extend %box-radius, %flex-between;

    background: fade-out($c-primary, 0.8);
    padding: 1em 2em;
    margin: 1em 0 2em 0;

    p {
      margin: 0;

      &::before {
        @extend %data-icon;

        content: '';
        font-size: 3em;
      }
    }

    &__actions {
      @extend %flex-center;
    }
  }

  .activity {
    margin: 1em 0 2em 0;
  }

  &__archived {
    @extend %archived;
  }

  &__other-actions {
    @extend %flex-between;
  }

  &__password {
    .flash__content {
      @extend %flex-center;

      padding: 2em;

      &::before {
        font-size: 3em;
      }
    }

    pre {
      font-size: 1.5em;
    }
  }
}

.student-add {
  &__choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    grid-gap: var(--box-padding);
    align-items: center;

    h2 {
      margin-bottom: 1em;
    }

    .button {
      width: 100%;
    }
  }

  &__or {
    color: $c-font-dimmer;
    margin: 2rem 0;
    text-align: center;
    font-style: italic;
    font-size: 2em;
  }

  &__created {
    strong a {
      text-decoration: underline;
    }

    p {
      margin-top: 1em;
    }

    pre {
      font-size: 1.5em;
    }

    .button {
      display: block;
      margin-top: 3em;
    }
  }
}
.student-add-many {
  form {
    margin-top: 2em;
  }
}

.student-edit {
  h2 {
    margin-bottom: 1em;
  }
}

.clas-home {
  background: $c-bg-clas;
  color: $c-bg-clas-over;

  &__doc {
    margin-bottom: 4em;
  }

  &__onboard {
    text-align: center;

    .button {
      margin-bottom: 2em;
      display: inline-block;
      background: mix($c-bg-clas, white, 86%);
    }
  }
}

.textcomplete-dropdown {
  @extend %popup-shadow;

  background: $c-bg-popup;

  li {
    list-style: none;
    border-top: $border;
    padding: 0.5em;
    min-width: 100px;
    font-weight: bold;
    cursor: pointer;
  }

  li.textcomplete-header,
  li.textcomplete-footer {
    display: none;
  }

  li:hover,
  .active {
    background-color: mix($c-accent, $c-bg-popup, 10%);
  }

  a {
    color: $c-font;
  }
}
